<template>
    <div class="subpage">
        <My-head title="忘记密码">
            <van-icon name="revoke" color="#f50" class="hicon"/>
        </My-head>

        <van-form @submit="onSubmit" @failed="onFail">
            <!-- 旧密码 -->
            <van-field
                autocomplete="off"
                v-model="form.oldpassword"
                :type="type"
                name="oldpassword"
                label="旧密码"
                left-icon="shield-o"
                :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
                @click-right-icon="changeType"
                placeholder="请输入旧密码"
                clearable
                :rules="[
                { required: true, message: '请输入密码' },
                { validator: checkpass, message: '请输入6-16位数字+字母组合密码' }
                ]"
            />
             <van-field
                v-model="form.newpassword"
                :type="type1"
                name="newpassword"
                label="新密码"
                left-icon="shield-o"
                :right-icon="type1 == 'password' ? 'closed-eye' : 'eye-o'"
                @click-right-icon="changeType1"
                placeholder="请输入新密码"
                clearable
                :rules="[
                { required: true, message: '请输入密码' },
                { pattern: reg.pwd, message: '请输入6-16位数字+字母组合密码'}
                ]"
            />

            <div style="margin: 16px;display:flex;" class="jcsb">
                <p>
                    <router-link :to="{ name: 'forgetpassword' }" class="link1 mb10">忘记密码?</router-link>
                </p>
            </div>

            <div style="margin: 16px;">
                <van-button  block type="primary" native-type="submit">确认修改</van-button>
            </div>

        </van-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {},
            type: 'password',
            type1: 'password'
        }
    },
    methods: {
         checkpass(val) {
            return this.reg.pwd.test(val)
        },
        onSubmit(value) {
            console.log(value)
            // 先通过 userInfo 查询 登录密码是否输入正确
            if(this.userInfo.password != value.oldpassword) {
                this.$toast("旧密码不匹配")
            } else {
                // 修改密码  id
                this.$ajax.updatePassword(this.userInfo.id, {
                    password: value.newpassword
                })
                .then(res => {
                    this.changeUserInfo(null)
                    this.showSuccessMsg("密码修改成功,将跳往登录页面")
                    this.$router.push({ name: 'login' })
                })
            }
        },
        onFail() {
            this.$toast("请输入有效格式的密码")
        },
        changeType() {
            this.type = this.type == 'password' ? 'type' : 'password'
        },
        changeType1() {
            this.type1 = this.type1 == 'password' ? 'type' : 'password'
        },
    }
}
</script>